<!--
 * @description  : 案件-详情信息
 * @descriptionDetail: 案件-详情信息
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-08-25 15:43:11
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      v-if="from != 'searchKey'" :is-white="false" :title="navTitle"
      :custom-back="goBack" style="z-index: 99999"
    ></theme-navbar>
    <!-- #endif -->
    <view class="content content-bg ifn-content">
      <view class="base-info">
        <view class="mini-title">
          案发时间：{{ baseInfo.caseDate }}
        </view>
        <view class="case-code-lay">
          <view class="case-code">
            {{ baseInfo.caseCode }}
          </view>
          <!-- <u-button
            plain
            size="mini"
            class="btn-lay"
            type="primary"
            v-if="from!='caseOrganized' && !justView"
            @click="collaborationClick()"
          >
            <u-icon name="grid" size="34"></u-icon>协同办案
          </u-button> -->
        </view>
        <view class="addr-lay">
          <view>{{ $u.test.isEmpty(baseInfo.casePlace) ? "案发地址未录入" : baseInfo.casePlace }}</view>
          <view>{{ $u.test.isEmpty(baseInfo.party) ? "当事人未录入" : baseInfo.party }}</view>
        </view>
        <view class="reason-lay">
          <view>案由：{{ $u.test.isEmpty(baseInfo.caseOfAction) ? "案由未录入" : baseInfo.caseOfAction }}</view>
        </view>
        <view class="reason-lay">
          <view>承办人：{{ baseInfo.undertaker }}</view>
        </view>
      </view>
      <view class="step-lay" v-if="from!='caseOrganized'" @click="updBaseInfo()">
        <view class="step-left-lay">
          <view class="step-left-lay-title">
            基础信息
          </view>
          <view class="step-left-lay-sub-title">
            {{ $u.test.isEmpty(baseInfo.modifyTime) ? "" : "修改时间: " + baseInfo.modifyTime }}
          </view>
        </view>
        <view>
          <u-icon name="arrow-right" size="40" :color="$theme.u_tips_color"></u-icon>
        </view>
      </view>
      <view class="step-lay1">
        <view class="step-lay1-head">
          <view class="step-left-lay">
            <view class="step-left-lay-title">
              涉案人
            </view>
            <view class="step-left-lay-sub-title">
              <text class="u-type-warning under-decoration u-m-r-10">
                必填
              </text>
              姓名、身份证号等
            </view>
          </view>
          <view>
            <u-button
              plain
              class="step-right-lay"
              :disabled="baseInfo.noMaster || justView"
              :type="baseInfo.noMaster || justView?'default':'primary'"
              size="mini"
              @click="addLitigantInfo"
            >
              <view>添加</view>
            </u-button>
          </view>
        </view>
        <view class="m-flex-row" v-if="handleProc == CASE_TYPE.NORMAL" style="padding-top: 20rpx; padding-bottom: 20rpx;">
          <text>无当事人(无主)</text>
          <view>
            <u-switch
              size="40"
              :disabled="justView"
              :loading="noMasterLoading"
              v-model="baseInfo.noMaster"
              @change="switchChange"
            ></u-switch>
          </view>
        </view>
        <u-line style="margin-top: 20rpx; margin-bottom: 20rpx;" :color="$theme.u_border_color"></u-line>
        <view style="width: 100%;" v-show="!baseInfo.noMaster">
          <u-swipe-action
            :show="partyItem.show"
            :index="index"
            :options="newOptions"
            :disabled="justView"
            v-for="(partyItem,index) in partyList"
            :key="partyItem.partyUuid"
            @click="partyClick"
            @open="partyOpen"
          >
            <view class="step-lay1-content step-lay1-content-border">
              <view class="step-lay1-content-left ">
                <view>
                  <view style="display: flex;flex-direction: row;">
                    <text>{{ partyItem.partyName }}</text>
                    <text class="step-lay1-content-left-tag">
                      {{ getDicName(partyItem.roleOfCase) }}
                    </text>
                  </view>
                  <view class="step-lay1-content-left-card">
                    证件号码: {{ partyItem.partyType == PARTY_TYPE_CODE.business ? partyItem.picIdCard : partyItem.idCard }}
                  </view>
                </view>
              </view>
            </view>
          </u-swipe-action>
        </view>
      </view>
      <!-- 案件生成信息 -->
      <view class="step-lay" @click="addGoodsInfo()">
        <view class="step-left-lay">
          <view class="step-left-lay-title">
            物品信息登记
          </view>
        </view>
        <view>
          <u-icon name="arrow-right" size="40" :color="$theme.u_tips_color"></u-icon>
        </view>
      </view>
      <!-- 互联网信息填写 -->
      <view class="step-lay1" v-if="baseInfo.isInternetCase == true && baseInfo.handleProc == CASE_TYPE.NORMAL ">
        <view class="step-lay1-head">
          <view class="step-left-lay">
            <view class="step-left-lay-title">
              互联网信息
            </view>
            <view class="step-left-lay-sub-title">
              {{ hasNetInfo?'互联网信息采集（向左滑动编辑）':'请先添加互联网信息' }}
            </view>
          </view>
          <view>
            <u-button
              :disabled="justView"
              plain
              class="step-right-lay"
              :type="justView?'default':'primary'"
              size="mini"
              @click="interInfo('add')"
            >
              <view>添加</view>
            </u-button>
          </view>
        </view>
        <view style="margin-top: 10rpx;">
          <u-swipe-action
            :show="netItem.show"
            :index="index"
            :disabled="justView"
            :options="netOptions"
            v-for="(netItem,index) in netList"
            :key="index"
            @click="netClick"
            @open="netOpen"
          >
            <view class="step-lay1-content" style="margin-bottom: 10rpx;">
              <view class="step-lay1-content-left">
                <view>
                  <view style="display: flex;flex-direction: row;" @click="netItmClick(netItem)">
                    <text>{{ netItem.infoItem }}</text>
                  </view>
                </view>
              </view>
            </view>
          </u-swipe-action>
        </view>
      </view>
      <!-- 窝点信息填写 -->
      <view class="step-lay1" v-if="handleProc == CASE_TYPE.NORMAL">
        <view class="step-lay1-head">
          <view class="step-left-lay">
            <view class="step-left-lay-title">
              窝点信息
            </view>
            <view class="step-left-lay-sub-title">
              {{ hasDensInfo?'窝点信息采集（向左滑动编辑）':'请先添加窝点信息' }}
            </view>
          </view>
          <view>
            <u-button
              :disabled="justView"
              plain
              class="step-right-lay"
              :type="justView?'default':'primary'"
              size="mini"
              @click="editDens('add')"
            >
              <view>添加</view>
            </u-button>
          </view>
        </view>
        <view style="margin-top: 10rpx;">
          <u-swipe-action
            :show="densItem.show"
            :index="index"
            :options="newOptions"
            :disabled="justView"
            v-for="(densItem,index) in densList"
            :key="index"
            @click="densClick"
            @open="densOpen"
          >
            <view class="step-lay1-content" style="margin-bottom: 10rpx;">
              <view class="step-lay1-content-left">
                <view>
                  <view style="display: flex;flex-direction: row;" @click="densItmClick(densItem)">
                    <text>{{ densItem.densName }}</text>
                  </view>
                </view>
              </view>
            </view>
          </u-swipe-action>
        </view>
      </view>
      <!-- 运输信息开始 -->
      <view class="step-lay1" v-if="handleProc == CASE_TYPE.NORMAL" @click="addTransInfo('add')">
        <view class="step-lay1-head">
          <view class="step-left-lay">
            <view class="step-left-lay-title">
              运输信息
            </view>
            <view class="step-left-lay-sub-title">
              <text class="u-type-warning under-decoration u-m-r-10" v-show="!hasTransInfo">
                必填
              </text>
              {{ hasTransInfo?'运输车辆、物流中转站等':'请先填写运输信息' }}
            </view>
          </view>
          <view>
            <u-button
              plain
              class="step-right-lay"
              :type="justView?'default':'primary'"
              size="mini"
              v-show="hasTransInfo"
              @click="addTransInfo('edit')"
            >
              <view>{{ justView ? '查看':'修改' }}</view>
            </u-button>
            <u-icon name="arrow-right" size="40" :color="$theme.u_tips_color" v-show="!hasTransInfo">
            </u-icon>
          </view>
        </view>
      </view>
      <!-- 运输信息结束 && from != 'areasCheck' && from != 'check'-->
      <view class="space-content" v-if="from!='caseOrganized' && from != 'searchKey' && from != 'intelligence'"></view>
      <view class="submit-btns btn-other-cls" v-if="from!='caseOrganized' && from != 'searchKey' && from != 'intelligence'">
        <u-button class="del" type="primary" @click="submit">
          文书列表
        </u-button>
      </view>
    </view>
    <!-- 人员选择 -->
    <u-popup mode="bottom" height="80%" v-model="orgPersonSelectShow">
      <org-person-select treeType="zm-case" @choose="handlerChoosePerson"></org-person-select>
    </u-popup>
  </view>
</template>

<script>
import caseService from '@/service/case/case.service.js';
import OrgPersonSelect from "@/components/org-person-select.vue";
import {
  SwiperEditAndDel,
  SwiperView,
  CASE_TYPE,
  PARTY_TYPE_CODE,
} from '@/service/case/mapping/index.js';
export default {
  components: {
    OrgPersonSelect,
  },
  props:{
    searchKeyUuid:{
      type:String,
      default: "",
    },
  },
  data() {
    return {
      CASE_TYPE,
      PARTY_TYPE_CODE,
      from: "", // caseOrganized 表示协办人进入  host 表示主办人   areasCheck  特殊区域检查进入  searchKey 一键搜进入  intelligence 情报登记进入
      isDocListPage: false,
      SwiperEditAndDel,
      SwiperView,
      orgPersonSelectShow: false,
      noMasterLoading: false,
      netOptions: [{
        text: '编辑',
        style: {
          backgroundColor: '#007aff',
        },
      },
      {
        text: '删除',
        style: {
          backgroundColor: '#dd524d',
        },
      },
      ],
      newOptions: [{
        text: '编辑',
        style: {
          backgroundColor: '#007aff',
        },
      },
      {
        text: '删除',
        style: {
          backgroundColor: '#dd524d',
        },
      },
      ],
      casePeople: [
        {name: '有涉案人',value:false,},
        {name: '无主',value:true,},
        // {name: '未发现当事人',value:2,},
      ],
      actionSheetShow: false,
      partyList: [], // 当事人/同案人数据
      densList: [], // 窝点列表数据
      baseInfo: {},
      caseSourceSubmit: false, // 来源登记是否提交了
      transportSubmit: false, // 运输信息是否提交
      caseUuid: '',
      // caseCode: '',
      handleProc: '01', // 默认是一般案件   2 表示 简易案件
      defaultCaseClue: {
        caseProperty: "案由未录入",
      },
      netList: [], // 网络信息列表数据
      docList: [], // 证据录入数据
      refreshCaseInfo:false,
    }
  },
  computed: {
    hasDensInfo() {
      return this.densList.length != 0; // 窝点信息
    },
    hasNetInfo() {
      return this.netList.length != 0; // 互联网信息
    },
    hasTransInfo() {
      return !this.$u.test.isEmpty(this.baseInfo.modifyTime); // 运输信息
    },
    justView() {
      try {
        // 特殊区域检查详情查看案件信息this.from == 'areasCheck' || this.from == 'check' ||
        if (this.from == 'searchKey' || this.from == 'intelligence') {
          return true;
        } else {
          let ar = this.baseInfo.isLookList;
          if (this.baseInfo.handleProc == CASE_TYPE.NORMAL) {
            return ar[0] == '0';
          } else {
            return false;
          }
        }
      } catch (e) {
        console.log(e);
        return false;
      }
    },
  },
  watch: {
    densList(newValue) {
      let self = this;
      newValue.filter(item => {
        self.$set(item, 'show', false);
        return true;
      });
    },
    netList(newValue) {
      let self = this;
      newValue.filter(item => {
        self.$set(item, 'show', false);
        return true;
      });
    },
    searchKeyUuid:{
      handler(newVal,oldVal){
        if(this.$u.test.isEmpty(newVal)) return;
        this.caseUuid = newVal;
        this.init();
      },
      immediate: false,
    },
  },
  // 加载初始周期方法
  created() {
    let data = this.getRouteParam();
    // this.caseCode = data.caseCode;
    this.caseUuid = data.caseUuid;
    this.handleProc = data.handleProc;
    this.from = data.from;
    this.isDocListPage = data.isDocListPage; // 是否是文书列表跳转过来的
    this.init();
    if(this.baseInfo.handleProc == CASE_TYPE.SIMPLE){
      this.baseInfo.noMaster = false;
    }
  },
  onShow() {
    if(this.refreshCaseInfo) {
      this.getCaseInfo();
      this.refreshCaseInfo = false;
    }
  },
  methods: {
    getCaseInfo(){
      this.$modal.showLoading('加载中...');
      caseService.getCaseInfoByIdfj({
        caseUuid: this.caseUuid,
      }).then(res => {
        this.$modal.hideLoading();
        if (!res.success) return;
        this.objMerge(this.baseInfo, res.bean);
        this.handleProc = this.baseInfo.handleProc;
        if(this.handleProc ==  CASE_TYPE.SIMPLE){
          this.baseInfo.noMaster = false;
        }
        this.getDefaultCaseClue();
      }).catch(res => {
        this.$modal.hideLoading();
        this.$u.toast(res.msg);
      });
    },
    init() {
      let self = this;
      if (this.$u.test.isEmpty(this.caseUuid)) { // 表示新增
        this.$modal.alert("无案件ID,稍后重试", () => {
          uni.navigateBack();
        });
      } else {
        this.getCaseInfo();
        this.getDensData();
        this.getPartyInfoList();
        this.getInternetData()
      }
    },
    getDefaultCaseClue() {
      caseService.casePropertyList().then(res => {
        if (!res.success) {
          return;
        }
        if (res.data && res.data.length > 0) {
          if (this.baseInfo.handleProc ==  CASE_TYPE.SIMPLE && this.$u.test.isEmpty(this.baseInfo.caseOfAction)) {
            this.defaultCaseClue = res.data[0];
            this.$set(this.baseInfo, 'caseOfAction', this.defaultCaseClue.caseProperty);
            this.defaultCaseClue.isMain = true;
            this.defaultCaseClue.caseUuid = this.baseInfo.caseUuid;
            this.baseInfo.casePropertyRelList = [];
            this.baseInfo.casePropertyRelList.push(this.defaultCaseClue);
          }
        }
      }).catch(err => {
        console.log("查询失败:" + err);
      });
    },
    getRestultFromServer(flag) {
      let tmpObj = {
        actionUuid: '',
        ...this.baseInfo,
      };
      // tmpObj.noMaster = flag;
      if (tmpObj.marketName == undefined) {
        tmpObj.marketName = '';
      }
      return new Promise((resolve, reject) => {
        caseService
          .saveCaseBaseInfo(tmpObj)
          .then((res) => {
            if (res.success) {
              // 后端允许用户关闭switch，设置checked为false，结束loading状态
              this.noMasterLoading = false;
              // this.baseInfo.noMaster = flag;
            } else {
              this.$modal.alert('保存失败:' + res.msg);
            }
          })
          .catch((err) => {
            this.$modal.hideLoading();
            this.$modal.alert('保存失败:' + err);
          });
      });
    },
    // 查询窝点信息
    getDensData() {
      caseService
        .getCaseDensList({
          caseUuid: this.caseUuid,
          limit: 1,
          page: 100,
        })
        .then((densInfo) => {
          // 窝点信息列表
          this.densList = densInfo.success && densInfo.data.length > 0 ? densInfo.data : [];
          this.newOptions = this.SwiperEditAndDel;
        });
    },
    // 查询互联网信息
    getInternetData() {
      caseService
        .getCaseInternetList({
          partyUuid: this.caseUuid,
          limit: 1,
          page: 100,
        })
        .then((netInfo) => {
          // // 窝点信息列表
          this.netList = netInfo.success && netInfo.data.length > 0 ? netInfo.data : [];
          this.netOptions = this.SwiperEditAndDel;
        });
    },
    // 获取涉案人list
    getPartyInfoList() {
      caseService.getPartyInfoList(this.caseUuid).then((res) => {
        if (!res.success) return;
        let data = [];
        res.data.forEach((itm) => {
          itm.show = false;
          data.push(itm.partyName);
        });
        // 案件当事人变更后 案件基本信息更随变化
        this.baseInfo.party = data.join(',');
        this.partyList = [...res.data,];
      });
    },
    updateBackState(param) {
      if (param.caseInfo) {
        // 窝点信息保存返回数据
        if (param.caseInfo.type == 'dens') {
          this.getDensData();
        }
      } else if (param.baseInfo) {
        this.$set(this.baseInfo, 'transChecked', param.baseInfo.transChecked);
        this.getCaseInfo();
      } else if (param.partyBack) {
        this.getPartyInfoList();
      } else if (param.internetInfo) {
        console.log(param.internetInfo);
        this.getInternetData();
      }
    },
    getDicName(code) {
      return this.$u.dic.getDicNameByKeyCode(this.$u.dic.DIC_KEYS.ROLE_OF_CASE, code);
    },
    handlerChoosePerson(psrList) {
      let names = [];
      let ids = [];
      let hasUnderId = false;
      for (let i = 0; i < psrList.length; i++) {
        names.push(psrList[i].name);
        ids.push(psrList[i].id);
        if (this.baseInfo.undertakerUuid.indexOf(psrList[i].id) != -1) {
          hasUnderId = true;
          break;
        }
      }
      if (hasUnderId) {
        this.orgPersonSelectShow = false;
        this.$u.toast('协办人不能是承办人');
        return;
      }
      let cooperatePsrUuids = ids.join(',');
      let cooperatePsrNames = names.join(',');
      this.orgPersonSelectShow = false;
      this.$modal.showLoading('保存协办人...');
      caseService
        .saveCooperatePsr(this.baseInfo.caseUuid, cooperatePsrUuids, cooperatePsrNames)
        .then((res) => {
          this.$modal.hideLoading();
          if (res.success) {
            this.baseInfo.cooperatePsrUuids = cooperatePsrUuids;
            this.baseInfo.cooperatePsrNames = cooperatePsrNames;
            this.setRouteParam(this.baseInfo);
            this.$u.route('/pages/case/offline/collaboration');
          } else {
            this.$modal.alert('保存失败:' + res.msg);
          }
        })
        .catch((err) => {
          this.$modal.hideLoading();
          this.$modal.alert('保存失败:' + err);
        });
    },
    collaborationClick: function () {
      if (this.justView) return;
      this.orgPersonSelectShow = true;
    },
    submit() {
      if (this.isDocListPage) {
        this.backPrev({
          paramKey: 'baseInfoRefresh',
          param: true,
        });
      } else {
        this.setRouteParam(this.baseInfo);
        this.$u.route({
          url: '/pages/case/official/officialList',
          type: 'redirect',
        });
      }
    },
    updBaseInfo: function () {
      // 修改基本信息
      this.setRouteParam({ ...this.baseInfo, from: this.from, });
      this.$u.route('/pages/case/baseInfo/baseInfo');
    },
    // 编辑
    editParty(obj) {
      if (this.justView) return;
      this.setRouteParam(obj);
      this.$u.route({
        url: '/pages/case/caseInfoTemp/partyInfo',
        params: {
          caseUuid: this.caseUuid,
        },
      });
    },
    // 提交
    addLitigantInfo: function () {
      if (this.justView) return;
      this.setRouteParam(undefined);
      this.$u.route({
        url: '/pages/case/caseInfoTemp/partyInfo',
        params: {
          caseUuid: this.caseUuid,
        },
      });
    },
    // 证据录入
    addEvidece: function () {
      if (this.justView) return;
      this.setRouteParam({
        caseUuid: this.caseUuid,
      });
      this.$u.route({
        url: '/pages/case/caseInfoTemp/evidenceInfo',
        type: 'to',
      });
    },
    addGoodsInfo: function () {
      // 添加物品
      this.refreshCaseInfo = true;
      this.setRouteParam({
        caseUuid: this.caseUuid,
        caseCode: this.baseInfo.caseCode,
        isMust: this.from != 'caseOrganized',
        justView: this.justView,
      });
      this.$u.route('/pages/case/goods/goodsInfo');
    },
    // 新增/编辑窝点
    editDens: function (type, obj) {
      if (this.justView) return;
      let dens = {
        type: type,
        caseCode: this.baseInfo.caseCode,
        caseUuid: this.caseUuid,
      };
      if (obj) {
        dens.param = obj;
      }
      this.setRouteParam(dens);
      this.$u.route('pages/case/caseInfoTemp/densInfo');
    },
    // 互联网信息
    interInfo: function (type, obj) {
      if (this.justView) return;
      let dens = {
        type: type,
        caseCode: this.baseInfo.caseCode,
        caseUuid: this.caseUuid,
      };
      if (obj) {
        dens.param = obj;
      }
      this.setRouteParam(dens);
      this.$u.route('pages/case/caseInfoTemp/internetInfo');
    },
    refreshSwiperDens() {
      let self = this;
      this.densList = this.densList.filter((item) => {
        self.$set(item, 'show', false);
        return true;
      });
    },
    refreshSwiperNet() {
      let self = this;
      this.netList = this.netList.filter((item) => {
        self.$set(item, 'show', false);
        return true;
      });
    },
    switchChange(e) {
      console.log('e:', this.baseInfo, e);
      this.$set(this.baseInfo, 'noMasterType', '');
      this.baseInfo.noMaster = e;
      this.noMasterLoading = true;
      this.getRestultFromServer(e);
    },
    // 窝点信息滑动操作
    densClick(index, index1) {
      if (index1 === 1) {
        let delDensList = this.densList;
        this.$modal.confirm('确定要删除吗?', () => {
          caseService
            .delDens({
              densUuid: delDensList[index].densUuid,
            })
            .then((res) => {
              if (res.success) {
                this.getDensData();
              }
            })
            .catch((err) => {
              this.$u.toast(err);
            });
        });
      } else {
        this.densList[index].show = false;
        this.editDens('edit', this.densList[index]);
      }
      this.refreshSwiperDens();
    },
    densItmClick(itm) {
      this.editDens('view', itm);
    },
    // 互联网信息滑动操作
    netClick(index, index1) {
      if (index1 === 1) {
        let delNetList = this.netList;
        console.log(delNetList);
        this.$modal.confirm('确定要删除吗?', () => {
          caseService
            .delNet({
              partyExUuid: delNetList[index].partyExUuid,
            })
            .then((res) => {
              if (res.success) {
                this.getInternetData();
              }
            })
            .catch((err) => {
              this.$u.toast(err);
            });
        });
      } else {
        this.netList[index].show = false;
        this.interInfo('edit', this.netList[index]);
      }
      this.refreshSwiperNet();
    },
    netItmClick(itm) {
      this.interInfo('view', itm);
    },
    // 涉案人信息滑动操作
    partyClick(index, index1) {
      if (index1 === 1) {
        this.$modal.confirm('确定要删除吗?', () => {
          caseService
            .deletePartyInfo(this.partyList[index].partyUuid)
            .then((res) => {
              if (res.success) {
                this.getPartyInfoList();
              }
            })
            .catch((err) => {
              this.$u.toast(err);
            });
        });
      } else {
        this.partyList[index].show = false;
        this.editParty(this.partyList[index]);
      }
      this.partyList.map((item) => {
        item.show = false;
      });
    },
    densOpen(index) {
      this.densList[index].show = true;
      this.densList.map((val, idx) => {
        if (index != idx) this.densList[idx].show = false;
      });
    },
    netOpen(index) {
      this.netList[index].show = true;
      this.netList.map((val, idx) => {
        if (index != idx) this.netList[idx].show = false;
      });
    },
    partyOpen(index) {
      this.partyList[index].show = true;
      this.partyList.map((val, idx) => {
        if (index != idx) this.partyList[idx].show = false;
      });
    },
    // 新增、修改运输信息
    addTransInfo(type) {
      let parms = {
        type: type,
        obj: this.baseInfo,
      };
      if (this.justView) {
        parms.type = 'view';
      }
      this.setRouteParam(parms);
      this.$u.route('pages/case/caseInfoTemp/modifyTransportInfo');
    },
  },
};
</script>

<style lang="scss" scoped>
	@import '../case_common.scss';
	.page {
		padding: 0;
		background-color: #f3f4f6;
	}
	.ifn-content {
		padding: 0rpx 5rpx 20rpx !important;
	}

	.base-info {
		padding: 30rpx 30rpx;
		background-color: #fff;
		min-height: 200rpx;
	}

	.mini-title {
		color: #999999;
		font-size: 26rpx;
		// margin: 10rpx;
	}

	.case-code-lay {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// margin: 10rpx;
	}

	.btn-lay {
		margin: 0px 0px;
	}

	.btn-lay::after {
		border: none;
	}

	.case-code {
		color: #333333;
		font-size: 40rpx;
		padding: 5rpx 0rpx;
		font-weight: bold;
	}

	.addr-lay {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		margin: 20rpx 0rpx;

		view {
			padding: 10rpx 15rpx;
			font-size: 24rpx;
			background-color: #f2f2f2;
			color: #565656;
			//margin: 3rpx 5rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
		}
	}

	.reason-lay {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		margin: 20rpx 0rpx;
		font-size: 0.7rem;
		color: #565656;

		view:first-child {
			color: #999999;
		}
	}

	.undertaker-lay {
		font-size: 0.9rem;
		font-weight: 800;
		margin: 30rpx 0rpx 10rpx;
		color: #333333;
	}

	.undertaker-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		font-size: 0.7rem;
		color: #565656;

		view {
			margin-top: 5rpx;
			margin-bottom: 5rpx;
		}

		view:not(view:last-child) {
			margin-right: 15rpx;
		}
	}

	.step-lay {
		background-color: #fff;
		margin: 30rpx 24rpx;
		border-radius: 15rpx;
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.step-left-lay {
			.step-left-lay-title {
				font-size: 32rpx;
				font-weight: 700;
				color: #333333;
			}

			.step-left-lay-sub-title {
				font-size: 26rpx;
				color: #999999;
			}
		}

		.step-right-lay {
			margin: 0px 5px;

			view {
				font-size: 0.6rem !important;
			}
		}
	}

	.step-lay1 {
		background-color: #fff;
		margin: 30rpx 24rpx;
		border-radius: 15rpx;
		padding: 30rpx 30rpx;

		.step-lay1-head {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;

			.step-left-lay {
				.step-left-lay-title {
					font-size: 32rpx;
					font-weight: 700;
					color: #333333;
				}

				.step-left-lay-sub-title {
					font-size: 26rpx;
					color: #999999;
				}
			}

			.step-right-lay {
				margin: 0px 5px;

				view {
					font-size: 0.6rem !important;
				}
			}
		}

		.step-lay1-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			margin-top: 30rpx;

			.step-lay1-content-left {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;

				view:first-child {
					font-size: 0.8rem;
					font-weight: 500;
					color: #333333;
					margin-right: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
				}

				.step-lay1-content-left-tag {
					padding: 3rpx 10rpx;
					border-radius: 20rpx;
					font-size: 0.6rem;
					color: $u-type-primary;
					margin-left: 10rpx;
					border: 1px solid $u-type-primary;
					background-color: $u-type-primary-light;
				}
			}

			.step-lay1-content-right {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: flex-start;

				view:first-child {
					color: #f19833;
					font-size: 0.7rem;
				}

				view:last-child {
					color: $u-tips-color;
				}
			}
		}
	}

	.space-content {
		height: 150rpx;
	}

	.flat-btn {
		position: fixed;
		bottom: 50rpx;
		margin: auto;
		left: 60rpx;
		right: 60rpx;
	}

	.step-lay1-content-border {
		border-bottom: 1rpx solid $u-border-color;
	}

	.step-lay1-content-left-card {
		font-size: 0.6rem;
		margin-top: 5rpx;
		padding-bottom: 25rpx;
		font-weight: 300 !important;
	}
</style>
